<template>
  <div class="festival_main">
    <a-card title="硒都节日" class="card_main">
      <a-card
        hoverable
        style="width: 30em;margin:10px 10px"
        v-for="item in festivalData"
        :key="item.id"
				class="card_list"
      >
        <template #cover>
          <img alt="example" :src="item.imageUrl" />
        </template>
        <a-card-meta :title="item.name">
          <template #description>
            <p>{{ item.time }}</p>
            <p>{{ item.description }}</p>
          </template>
        </a-card-meta>
      </a-card>
    </a-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { customsList } from "@/utils/fetch/api";
export default defineComponent({
  components: {},
  setup() {
    const loading = ref<any>(false);
    const festivalData = ref<any>();
    const refresh = async () => {
      const data = await customsList({ pageNum: 1 });
      festivalData.value = data.data.data;
    };
    onMounted(() => {
      loading.value = true;
      refresh();
      loading.value = false;
    });
    return {
      festivalData,
    };
  },
});
</script>

<style lang="less" scoped>
.festival_main {
  width: 100%;
  height: 100%;
  background: white;
  padding: 20px;
  /deep/.card_main {
    .ant-card-head-title {
      font-size: 3em;
    }
  }
	.card_list{
		float: left;
	}
	.card_list::after{
		content: "";
		clear: both;
	}
}
</style>
